<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="../util/jquery-3.4.0.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/ll-c1.css">
</head>
<body>
<p id="two">
    <strong>国信国际幼儿园权限管理</strong>
</p>
    <div class="ll-a1">
        <div class="row container-fluid">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ll-a1">
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#ll-t1">批量删除</button>
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#ll-t2">新增角色</button>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                    <table class="table table-striped ">
                        <tr>
                            <th><input type="checkbox" name="selectAllBtn" id="qx"></th>
                            <th>#</th>
                            <th>角色名</th>
                            <th>拥有权限规则</th>
                            <th>描述</th>
                            <th>状态</th>
                            <th>操作</th>
                            <th>查看成员</th>
                        </tr>
                    </table>
                    <div class="col-lg-12 col-md-12 col-sm-12 hidden-xs text-center">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                </div>
            </div>
        </div>
    </div>
<div class="modal fade" id="ll-t1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">批量删除</h4>
            </div>
            <div class="modal-body">
                您确认全部删除吗？删除后无法恢复。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="btn1" type="button" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ll-t2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加新的管理权限</h4>
            </div>
            <div class="modal-body">
                <div class="row form-horizontal">
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">权限名</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control ll-i1" id="inputPassword" placeholder="请输入有意义的2到6位的汉子">
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">权限规则</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control ll-i2" id="inputPassword" placeholder="请描述一下权限的规则">
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-9">
                            <input value="" type="text" class="form-control ll-i3" id="inputPassword" placeholder="请描述一下权限">
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control ll-i4" id="inputPassword" placeholder="请填写状态是否已（注销、启用）">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary ll-t2" id="ll-I1">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ll-t2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加新的管理权限</h4>
            </div>
            <div class="modal-body">
                <div class="row form-horizontal">
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">权限名</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control ll-i1" id="inputPassword" placeholder="请输入有意义的2到6位的汉子">
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">权限规则</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control ll-i2" id="inputPassword" placeholder="请描述一下权限的规则">
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-9">
                            <input value="" type="text" class="form-control ll-i3" id="inputPassword" placeholder="请描述一下权限">
                        </div>
                    </div>
                    <div class="form-group has-success has-feedback">
                        <label for="inputPassword" class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control ll-i4" id="inputPassword" placeholder="请填写状态是否已（注销、启用）">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary ll-t2" id="ll-I2">确认</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var oT=document.querySelector('table');
    var aaa=`<div id="t1" class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-danger btn-xs bt1 ">删除</button>
            <button type="button" class="btn btn-success btn-xs bt2">修改</button>
        </div>`;
    var aaaa=`<a href="ll&html1.html"><button id="t2" type="button" class="btn btn-info btn-xs">查看</button></a>`;
    var bm=0;
    var oBtn=$('#btn1');
    var arr=[];






    $('#ll-I1').click(function () {
        $('#ll-t2').modal('hide');

        var c=(bm++)+1;
        var oTr=document.createElement('tr');
        arr.push($('.ll-i1').val());
        localStorage.setItem("1",arr.toString());
        oTr.innerHTML=`
          <td>&nbsp&nbsp<input type="checkbox" class="ipt1"></td>
          <td>&nbsp&nbsp${c}</td>
          <td>&nbsp&nbsp${$('.ll-i1').val()}</td>
          <td>&nbsp&nbsp${$('.ll-i2').val()}</td>
          <td>&nbsp&nbsp${$('.ll-i3').val()}</td>
          <td>&nbsp&nbsp${$('.ll-i4').val()}</td>
          <td>&nbsp&nbsp${aaa}</td>
          <td>&nbsp&nbsp${aaaa}</td>
       `;
        oT.appendChild(oTr);
    });


    var oAll=document.getElementById('qx');
    var oContent=oT.getElementsByTagName("input");

    oAll.onclick=function () {
        for (var a=0;a<oContent.length;a++) {
            oContent[a].checked=true;
        }
    };
    //删除功能组
    oBtn.click(function () {
        $('#ll-t1').modal('hide');
        var checked=$('.ipt1:checkbox');
        for (var i = 0; i < checked.length; i++) {
            if(checked.eq(i).prop('checked')){
                checked.eq(i).parent().parent().remove()
            }
        }
    });
    //单个
    $(function(){
        $(oT).on("click",'.bt1',function(event){
            var target = $(event.target);
            target.parent().parent().parent().remove();

        });
        $(oT).on("click",'.bt2',function(event){
            var target = $(event.target);
            target.parent().parent().parent().remove();

        });
    });

</script>
</html>